<template>
	<view class="re-actual">
		<view class="actual-filter">
			<view class="actual-filter-title" v-for="item in filterList" :key="item.id" :class="item.id == current ? 'active' : ''" @click="changeFilter(item.id)">
				{{ item.name }}
			</view>
		</view>
		<view class="actual-list">
			<view v-for="item in courseSearchList" :key="item.id">
				<view class="actual-list-item">
					<img class="actual-item-img" :src="item.courseCover" />
					<view class="actual-item-main">
						<view class="actual-item-title">{{ item.courseName }}</view>
						<view class="actual-item-type">{{ courseType(item.courseLevel) }}</view>
						<view class="actual-item-total">
							<view class="actual-item-price" v-if="item.salePrice != 0">
								<view>限时优惠</view>
								<view style="padding-left: 21rpx">￥{{ item.salePrice }}</view>
							</view>
							<view class="actual-item-price" v-else>
								<view>限时优惠</view>
								<view style="padding-left: 21rpx">免费</view>
							</view>
							<view class="actual-item-number">{{ courseNumber(item.clicks) }}人学习</view>
						</view>
					</view>
				</view>
				<u-divider text=""></u-divider>
			</view>
		</view>
	</view>
</template>

<script>
import { mixin } from '../../mixins/mixin';
import { actualCourse } from '@/api/course.js';
export default {
	mixins: [mixin],
	props: {
		// courseSearchList: {
		// 	type: Array,
		// 	default: []
		// }
	},
	data() {
		return {
			courseSearchList: [],
			filterList: [
				{
					id: 1,
					name: '综合推荐'
				},
				{
					id: 2,
					name: '最新'
				},
				{
					id: 3,
					name: '浏览最多'
				}
			],
			current: 1,
			courseParams: {
				pageNum: 1,
				pageSize: 5,
				entity: {
					courseLevel: 3
				}
			}
		};
	},
	created() {
		this.getCourseList();
	},
	methods: {
		changeFilter(id) {
			this.current = id;
			this.resetParams();
			if (id == 1) {
				//综合推荐
				this.courseParams.entity.sortBy = '';
			} else if (id == 2) {
				//最新
				this.courseParams.entity.sortBy = 'price-desc';
			} else if (id == 3) {
				//浏览最多
				this.courseParams.entity.sortBy = 'clicks-desc';
			}
			this.getCourseList();
		},
		getCourseList() {
			actualCourse(this.courseParams).then((res) => {
				this.courseSearchList = [...this.courseSearchList, ...res.pageInfo.list];
			});
		},
		loadMore() {
			this.courseParams.pageNum++;
			this.getCourseList();
		},
		resetParams() {
			this.courseParams = {
				pageNum: 1,
				pageSize: 5,
				entity: {
					courseLevel: 3
				}
			};
			this.courseSearchList = [];
		}
	}
};
</script>

<style scoped>
.actual-filter {
	padding: 14rpx 0;
	display: flex;
}

.actual-filter-title {
	padding-left: 44rpx;
	font-size: 28rpx;
	/* font-weight: 400; */
	color: #a0a4ad;
}

.actual-list {
	padding: 14rpx;
}

.actual-title-more {
	font-size: 26rpx;
	font-weight: 400;
	color: #a0a4ad;
}

.actual-list-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.actual-item-img {
	width: 237rpx;
	height: 186rpx;
	border-radius: 12rpx;
	background-color: #ccc;
}
.actual-item-main {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 186rpx;
	padding-left: 23rpx;
}
.actual-item-title {
	font-size: 29rpx;
	color: #191919;
	font-weight: 400;
	/* margin: 20rpx; */
}
.actual-item-type {
	font-size: 24rpx;
	color: #c5c5c5;
	font-weight: 400;
	/* margin: 0 20rpx; */
}
.actual-item-total {
	display: flex;
	justify-content: space-between;
	align-items: center;
	/* margin: 20rpx; */
}
.actual-item-price {
	display: flex;
	font-size: 21rpx;
	color: #ff4b5c;
	font-weight: 600;
}
.actual-item-number {
	font-size: 21rpx;
	font-weight: 400;
	color: #a0a4ad;
}

.active {
	font-weight: 400;
	color: #000000;
}
</style>
